<template>
	<div class="audio-test">
		<div class="test-header">
			<span class="title">音频播放测试</span>
		</div>
		
		<div class="test-info">
			<span class="info-item">主音频路径: {{ mainAudio }}</span>
			<span class="info-item">副音频路径: {{ subAudio }}</span>
			<span class="info-item">混合模式: {{ isMixing ? '开启' : '关闭' }}</span>
		</div>
		
		<div class="test-controls">
			<button @click="testFileAccess" class="test-btn">测试文件访问</button>
			<button @click="testAudioContext" class="test-btn">测试音频上下文</button>
			<button @click="testWebAudio" class="test-btn">测试Web音频</button>
		</div>
		
		<div class="test-results">
			<span class="result-title">测试结果:</span>
			<span v-for="(result, index) in testResults" :key="index" class="result-item">
				{{ result }}
			</span>
		</div>
		
		<simple-audio-player 
			:main-audio="mainAudio"
			:sub-audio="subAudio"
			:is-mixing="isMixing"
			v-model:current-time="currentTime"
		/>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import simpleAudioPlayer from './simple-audio-player.vue'

// 响应式数据
const mainAudio = ref('/static/audio/main.mp3')
const subAudio = ref('/static/audio/sub.mp3')
const isMixing = ref(true)
const currentTime = ref(0)
const testResults = ref([])

// 方法函数
// 测试文件访问
const testFileAccess = async () => {
	testResults.value = []
	addResult('开始测试文件访问...')
	
	try {
		// 测试主音频文件
		const mainResponse = await testFile(mainAudio.value)
		addResult(`主音频文件: ${mainResponse ? '可访问' : '不可访问'}`)
		
		// 测试副音频文件
		const subResponse = await testFile(subAudio.value)
		addResult(`副音频文件: ${subResponse ? '可访问' : '不可访问'}`)
		
	} catch (error) {
		addResult(`文件访问测试失败: ${error.message}`)
	}
}

// 测试单个文件
const testFile = (url) => {
	return new Promise((resolve) => {
		fetch(url, { method: 'HEAD' })
			.then(response => {
				resolve(response.ok)
			})
			.catch(() => {
				resolve(false)
			})
	})
}

// 测试音频上下文
const testAudioContext = async () => {
	addResult('开始测试音频上下文...')
	
	try {
		const audioContext = new (window.AudioContext || window.webkitAudioContext)()
		addResult(`音频上下文状态: ${audioContext.state}`)
		
		if (audioContext.state === 'suspended') {
			await audioContext.resume()
			addResult(`音频上下文已激活: ${audioContext.state}`)
		}
		
		audioContext.close()
		addResult('音频上下文测试完成')
		
	} catch (error) {
		addResult(`音频上下文测试失败: ${error.message}`)
	}
}

// 测试Web音频
const testWebAudio = async () => {
	addResult('开始测试Web音频...')
	
	try {
		const audio = new Audio()
		audio.src = mainAudio.value
		
		audio.addEventListener('canplay', () => {
			addResult('Web音频可以播放')
		})
		
		audio.addEventListener('error', (error) => {
			addResult(`Web音频错误: ${error.message}`)
		})
		
		// 设置超时
		setTimeout(() => {
			addResult('Web音频测试超时')
		}, 5000)
		
		// 尝试加载音频
		audio.load()
		
	} catch (error) {
		addResult(`Web音频测试失败: ${error.message}`)
	}
}

// 添加测试结果
const addResult = (message) => {
	const timestamp = new Date().toLocaleTimeString()
	testResults.value.push(`[${timestamp}] ${message}`)
}
</script>

<style scoped>
	.audio-test {
		padding: 20px;
		background-color: #f8f9fa;
		min-height: 100vh;
	}

	.test-header {
		text-align: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.test-info {
		background-color: white;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 20px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.info-item {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		color: #666;
		word-break: break-all;
	}

	.test-controls {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 20px;
	}

	.test-btn {
		padding: 10px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.test-btn:hover {
		background-color: #0056b3;
	}

	.test-results {
		background-color: white;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 20px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		max-height: 300px;
		overflow-y: auto;
	}

	.result-title {
		display: block;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.result-item {
		display: block;
		margin-bottom: 5px;
		font-size: 12px;
		color: #666;
		font-family: monospace;
		word-break: break-all;
	}
</style>
